<template>
    <div class="box">

        <el-page-header @back="goBack" :content="`${info.code} ${info.name}`">
        </el-page-header>

        <div id="myChart"></div>


<!--        <div class="table">-->
<!--            <el-table-->
<!--                    border-->
<!--                    stripe-->
<!--                    :data="page.list"-->
<!--                    height="100%"-->
<!--                    v-loading="loading"-->
<!--            >-->
<!--                <el-table-column prop="code" label="代码"></el-table-column>-->
<!--                <el-table-column prop="name" label="名字"></el-table-column>-->
<!--                <el-table-column label="日期">-->
<!--                    <template slot-scope="scope">-->
<!--                        {{scope.row.stockDate.substring(0,10)}}-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column prop="highPrice" label="最高价"></el-table-column>-->
<!--                <el-table-column prop="lowPrice" label="最低价"></el-table-column>-->
<!--                <el-table-column prop="beginPrice" label="开盘价"></el-table-column>-->
<!--                <el-table-column prop="endPrice" label="收盘价"></el-table-column>-->
<!--                <el-table-column label="换手率">-->
<!--                    <template slot-scope="scope">-->
<!--                        {{scope.row.exchange + '%'}}-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column prop="tradeCount" label="成交数"></el-table-column>-->
<!--                <el-table-column prop="tradeMoney" label="成交总额"></el-table-column>-->


<!--            </el-table>-->
<!--        </div>-->
<!--        <el-backtop target=".el-table__body-wrapper"></el-backtop>-->

        <!--        <el-pagination-->
<!--                class="page"-->
<!--                @size-change="load"-->
<!--                @current-change="load"-->
<!--                :current-page.sync="pageNumber"-->
<!--                :page-sizes="[100, 200, 300, 400]"-->
<!--                :page-size.sync="pageSize"-->
<!--                layout="total, sizes, prev, pager, next, jumper"-->
<!--                :total="page.total">-->
<!--        </el-pagination>-->

    </div>
</template>

<script>
    import echarts from 'echarts'

    export default {
        name: "List",
        data(){
            return {
                page: {
                    list: [],
                    total: 0
                },
                pageNumber: 1,
                pageSize: 100,
                loading: false,
                info:{
                    code:"",
                    name:""
                }
            }
        },
        methods:{
            goBack(){
                this.$router.back()
            },
            draw(data){
                var upColor = '#ec0000';
                var upBorderColor = '#8A0000';
                var downColor = '#00da3c';
                var downBorderColor = '#008F28';


                var data0 = {
                    categoryData:  [],
                    values: []
                };
                var i = data.length;
                while(i--){
                    var e = data[i];
                    data0.categoryData.push(e[0]||"");
                    data0.values.push([Number(e[6]),Number(e[3]),Number(e[5]),Number(e[4])])
                }

                function calculateMA(dayCount) {
                    var result = [];
                    for (var i = 0, len = data0.values.length; i < len; i++) {
                        if (i < dayCount) {
                            result.push('-');
                            continue;
                        }
                        var sum = 0;
                        for (var j = 0; j < dayCount; j++) {
                            sum += data0.values[i - j][1];
                        }
                        result.push((sum / dayCount).toFixed(3));
                    }
                    return result;
                }

                var option = {
                    title: {
                        text: '上证指数',
                        left: 0,
                        show: false
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    legend: {
                        data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
                    },
                    grid: {
                        left: '10%',
                        right: '10%',
                        bottom: '15%'
                    },
                    xAxis: {
                        type: 'category',
                        data: data0.categoryData,
                        scale: true,
                        boundaryGap: false,
                        axisLine: {onZero: false},
                        splitLine: {show: false},
                        splitNumber: 20,
                        min: 'dataMin',
                        max: 'dataMax'
                    },
                    yAxis: {
                        scale: true,
                        splitArea: {
                            show: true
                        }
                    },
                    dataZoom: [
                        {
                            type: 'inside',
                            start: 50,
                            end: 100
                        },
                        {
                            show: true,
                            type: 'slider',
                            top: '90%',
                            start: 50,
                            end: 100
                        }
                    ],
                    series: [
                        {
                            name: '日K',
                            type: 'candlestick',
                            data: data0.values,
                            itemStyle: {
                                color: upColor,
                                color0: downColor,
                                borderColor: upBorderColor,
                                borderColor0: downBorderColor
                            },
                            large: true,

                            // tooltip: {
                            //     trigger: 'item',  //此时不要为'axis',否则params.name或者params.value不显示
                            //     formatter: function (params) {
                            //         return params.name + '<br>' +
                            //             '开盘:' + params.value[0] + '<br>' +
                            //             '收盘:' + params.value[1] + '<br>' +
                            //             '最低:' + params.value[2] + '<br>' +
                            //             '最高:' + params.value[3]
                            //     }
                            // },

                            // dimensions: ["开盘", "收盘", "最低", "最高"]
                            markPoint: {
                                label: {
                                    normal: {
                                        formatter: function (param) {
                                            return param != null ? Math.round(param.value) : '';
                                        }
                                    }
                                },
                                data: [
                                    // {
                                    //     name: 'XX标点',
                                    //     coord: ['2013/5/31', 2300],
                                    //     value: 2300,
                                    //     itemStyle: {
                                    //         color: 'rgb(41,60,85)'
                                    //     }
                                    // },
                                    {
                                        name: 'highest value',
                                        type: 'max',
                                        valueDim: 'highest'
                                    },
                                    {
                                        name: 'lowest value',
                                        type: 'min',
                                        valueDim: 'lowest'
                                    },
                                    {
                                        name: 'average value on close',
                                        type: 'average',
                                        valueDim: 'close'
                                    }
                                ],
                                tooltip: {
                                    formatter: function (param) {
                                        return param.name + '<br>' + (param.data.coord || '');
                                    }
                                }
                            },
                            markLine: {
                                symbol: ['none', 'none'],
                                data: [
                                    [
                                        {
                                            name: 'from lowest to highest',
                                            type: 'min',
                                            valueDim: 'lowest',
                                            symbol: 'circle',
                                            symbolSize: 10,
                                            label: {
                                                show: false
                                            },
                                            emphasis: {
                                                label: {
                                                    show: false
                                                }
                                            }
                                        },
                                        {
                                            type: 'max',
                                            valueDim: 'highest',
                                            symbol: 'circle',
                                            symbolSize: 10,
                                            label: {
                                                show: false
                                            },
                                            emphasis: {
                                                label: {
                                                    show: false
                                                }
                                            }
                                        }
                                    ],
                                    {
                                        name: 'min line on close',
                                        type: 'min',
                                        valueDim: 'close'
                                    },
                                    {
                                        name: 'max line on close',
                                        type: 'max',
                                        valueDim: 'close'
                                    }
                                ]
                            }
                        },
                        {
                            name: 'MA5',
                            type: 'line',
                            data: calculateMA(5),
                            smooth: true,
                            lineStyle: {
                                opacity: 0.5
                            }
                        },
                        {
                            name: 'MA10',
                            type: 'line',
                            data: calculateMA(10),
                            smooth: true,
                            lineStyle: {
                                opacity: 0.5
                            }
                        },
                        {
                            name: 'MA20',
                            type: 'line',
                            data: calculateMA(20),
                            smooth: true,
                            lineStyle: {
                                opacity: 0.5
                            }
                        },
                        {
                            name: 'MA30',
                            type: 'line',
                            data: calculateMA(30),
                            smooth: true,
                            lineStyle: {
                                opacity: 0.5
                            }
                        },

                    ]
                };

                let myChart = echarts.init(document.getElementById('myChart'))
                myChart.setOption(option);
            },
            load(){
                // function randomData() {
                //     now = new Date(+now + oneDay);
                //     value = value + Math.random() * 21 - 10;
                //     return {
                //         name: now.toString(),
                //         value: [
                //             [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                //             Math.round(value)
                //         ]
                //     };
                // }
                //
                // var data = [];
                // var now = +new Date(1997, 9, 3);
                // var oneDay = 24 * 3600 * 1000;
                // var value = Math.random() * 1000;
                // for (var i = 0; i < 1000; i++) {
                //     data.push(randomData());
                // }
                //



                // this.loading = true;
                $.get("/api/search/list",{code: this.$route.params.code, page: this.pageNumber, size: this.pageSize})
                .then(json => {
                    // this.loading = false;
                    // this.page.list = json.data;
                    if(json.data.length){
                        this.info.code = json.data[0][1].substring(1);
                        this.info.name = json.data[0][2];
                    }
                    // this.info = json.data.info[0] || {};
                    this.draw(json.data)
                    // this.page.total = json.data.totalRow;
                })
                .fail(e => {
                    // this.loading = false;
                });
            }
        },
        mounted() {
            this.load();
        }
    }
</script>

<style scoped>
    .box{
        width: 100vw;
        height: 100vh;
        padding: 20px;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .table{
        flex: 1;
        margin-top: 10px;
        /*height: 500px;*/
        /*height: calc(100vh - 20px - 20px - 30px - 30px);*/
    }
    .page{
        padding-top: 20px;
        /*padding-bottom: 10px;*/
        text-align: right;
    }
    #myChart{
        margin-top: 100px;
        width: calc(100vw - 40px);
        height: 50vh;
    }
</style>